<template>

    <el-card :body-style="{ padding: '0px' ,margin:'0px',border:'none'}" shadow="never">
      <div v-if="weatherInfo==null">
        <p>
          无法获取当前地区
        </p>
      </div>
      <div style="padding: 10px; margin: 0" v-if="weatherInfo!=null">
        <div class="bottom clearfix">
          <time class="time">{{ weatherInfo.casts[0].date }} 星期{{ todayWeather.week }}</time>
        </div>
        <span>{{ weatherInfo.province }} - {{ weatherInfo.city }}</span>
        <p>天气情况： {{ todayWeather.dayweather + ' ~ ' + todayWeather.nightweather }}</p>
        <p>温度：{{ todayWeather.nighttemp + '℃' }} ~ {{ todayWeather.daytemp + '℃' }}</p>
        <p>风向： {{ todayWeather.daywind }}</p>
      </div>
    </el-card>


</template>

<script>
import { getWeather } from '@/api/weather'

export default {
  name: 'weather',
  data() {
    return {
      visible: false,
      weatherInfo: [],
      todayWeather: {}
    }
  },
  mounted() {
    this.getTodayWeather()
  },
  methods: {
    getTodayWeather() {
      getWeather().then(res => {
        this.weatherInfo = res.data.forecasts[0]
        this.todayWeather = this.weatherInfo.casts[0]
      })
      console.log(this.weatherInfo)
    }
  }
}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.popover {
  padding: 0;
  margin: 0;
}
</style>
